<script setup>
import IconFull from '@/components/icon-full/index.vue'
import {computed} from 'vue'
const props = defineProps({
  type: {
    type: String,
    default: 'default', //default-默认 simple-简单 primary-主要 warn-警告
  },
  mode: {
    type: String,
    default: 'rect', // round-圆形的 rect-方形
  },
  disabled: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: 'default', // middle-中型 small-小型 mini-迷你 default-默认
  },
  prefixIcon: String,
  openType: String,
  loading: Boolean,
  plain: Boolean,
  shadow: Boolean,
  styles: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['click', 'getphonenumber', 'getrealtimephonenumber', 'getuserinfo', 'contact', 'error', 'opensetting', 'launchapp', 'chooseavatar', 'agreeprivacyauthorization'])

const clazz = computed(() => {
  return {
    'button-x-primary': props.type === 'primary',
    'button-x-default': props.type === 'default',
    'button-x-simple': props.type === 'simple',
    'button-x-success': props.type === 'success',
    'button-x-warn': props.type === 'warn',
    'button-x-plain': !!props.plain,
    'button-x-rect': props.mode === 'rect',
    'button-x-round': props.mode === 'round',
    'text-color1': !(['primary', 'success', 'warn'].includes(props.type)),
    'text-color2': ['primary', 'success', 'warn'].includes(props.type),
    'button-x-size-default': props.size === 'default',
    'button-x-size-middle': props.size === 'middle',
    'button-x-size-small': props.size === 'small',
    'button-x-size-mini': props.size === 'mini',
    'button-x-rect-mini': props.mode === 'rect' && props.size === 'mini',
    'button-x-shadow': props.shadow,
  }
})
</script>

<template>
  <button
    class="button-x-container"
    :class="clazz"
    :open-type="props.openType"
    :disabled="props.disabled"
    :loading="props.loading"
    :style="{ ...props.styles }"
    @click="($event) => emit('click', $event)"
    @getphonenumber="($event) => emit('getphonenumber', $event)"
    @getrealtimephonenumber="($event) => emit('getrealtimephonenumber', $event)"
    @getuserinfo="($event) => emit('getuserinfo', $event)"
    @contact="($event) => emit('contact', $event)"
    @opensetting="($event) => emit('opensetting', $event)"
    @error="($event) => emit('error', $event)"
    @launchapp="($event) => emit('launchapp', $event)"
    @chooseavatar="($event) => emit('chooseavatar', $event)"
    @agreeprivacyauthorization="($event) => emit('agreeprivacyauthorization', $event)"
  >
    <view class="prefix" v-if="!props.prefixIcon"><slot name="prefix"></slot></view>
    <view class="prefix-default" v-else><icon-full :name="props.prefixIcon" /></view>
    <slot></slot>
  </button>
</template>

<style scoped lang="scss">
.button-x-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 2px;
  font-style: normal;
  font-size: 0;
  &::after {
    display: none;
  }
}
.button-x-size-default {
  padding: 16px 24px;
  font-size: 20px;
  line-height: 28px;
}
.button-x-size-middle {
  padding: 13px 17px;
  font-size: 20px;
  line-height: 28px;
}
.button-x-size-small {
  padding: 12px;
  font-size: 18px;
  line-height: 25px;
}
.button-x-size-mini {
  padding: 4px 12px;
  font-size: 16px;
  line-height: 25px;
}
.text-color1 {
  color: $kaoyan-color-9;
}
.text-color2 {
  color: $kaoyan-color-14;
}
.button-x-rect {
  border-radius: 16px !important;
  &::after {
    border-radius: 32px !important;
  }
}
.button-x-rect-mini {
  border-radius: 8px !important;
  &::after {
    border-radius: 16px !important;
  }
}
.button-x-round {
  border-radius: 50px !important;
  &::after {
    border-radius: 100px !important;
  }
}
.button-x-primary {
  background-color: $kaoyan-color-9;
  &:active {
    background-color: rgba($kaoyan-color-9, .8);
  }
}
.button-x-default {
  background-color: $kaoyan-color-12;
  &:active {
    background-color: rgba($kaoyan-color-12, .8);
  }
}
.button-x-simple {
  background-color: $kaoyan-color-14;
  &:active {
    background-color: rgba($kaoyan-color-14, .8);
  }
}
.button-x-success {
  background-color: $kaoyan-color-7;
  &:active {
    background-color: rgba($kaoyan-color-7, .8);
  }
}
.button-x-warn {
  color: $kaoyan-color-14;
  background-color: $kaoyan-color-3;
  &:active {
    background-color: rgba($kaoyan-color-3, .8);
  }
}
.button-x-plain {
  background: none;
  &::after {
    display: block;
  }
}
.button-x-shadow {
  background-color: linear-gradient(180deg, $kaoyan-color-14 0%, rgba(255, 255, 255, 0.85) 100%);
  box-shadow: 0 4px 10px 0 rgba(23, 70, 104, 0.05);
  &::after {
    border: 2px solid rgba(255, 255, 255, 0.00);
  }
}
</style>
